<template>
  <v-container data-app="true" id="fileForDetails">
    <v-app-bar app color="#fff">
      <AppHeader />
    </v-app-bar>
    <v-card class="taber-serch">
      <v-card class="condition-list-item">
        <span style="font-size: 12px">横向字段</span>
        <div class="ipt-width">
          <v-select
            style="display: inline-block; max-width: 190px"
            v-model="rowSel"
            :items="items"
            dense
            solo
            dark
            clearable
          ></v-select>
        </div>
      </v-card>
      <v-card class="condition-list-item" style="margin-left: 10px">
        <span>纵向字段</span>
        <div class="ipt-width">
          <v-select
            style="display: inline-block; max-width: 190px"
            v-model="colSel"
            :items="items"
            dense
            solo
            dark
            clearable
          ></v-select>
        </div>
      </v-card>
      <v-card class="condition-center">
        <v-checkbox
          style="padding: 0 8px !important"
          v-model="Subfolder"
          color="selected"
          hide-details
        >
          <template v-slot:label>
            <div class="labels">包括子文件</div>
          </template></v-checkbox
        >
        <v-btn tile color="#e8e8e8" max-width="25" class="btn" x-small>
          <span class="icons iconfont icon-xiangxia"></span>
        </v-btn>
      </v-card>
      <v-card class="condition-right">
        <input type="text" />
        <div style="border-right: 2px solid #eee">
          <v-btn @click="serch" tile color="#e8e8e8" width="35" class="btn">
            <span class="iconfont icon-sousuo"></span>
            查询
          </v-btn>
        </div>
        <div style="border-right: 2px solid #eee">
          <!-- <v-btn tile color="#e8e8e8" max-width="25" class="btn" x-small>
            <span class="icons iconfont icon-wenhao"></span>
          </v-btn> -->
          <v-tooltip class="btns" bottom color="#fff" z-index="999">
            <template v-slot:activator="{ on, attrs }">
              <span
                v-bind="attrs"
                v-on="on"
                class="wenhao icons iconfont icon-wenhao"
              ></span>
            </template>
            <div class="hint">
              <h3>关键字搜索说明</h3>
              <p>通配符种类：*通配0-N个词 ; ？</p>
              <p>
                通配1个此通配符位置：可以放置条件的前端、中间和末端，例如：*very、goo*、th*nk
              </p>
              <p>
                注意：支持一个字母更通配符的搭配，但不建议此方式搜索，例如：a*或者*a
              </p>
            </div>
          </v-tooltip>
        </div>
        <div>
          <v-btn tile color="#e8e8e8" width="60" class="btn" x-small>
            <span> <span class="fa fa-paperclip"></span> 导出</span>
          </v-btn>
        </div>
      </v-card>
    </v-card>
    <v-card class="taber-content">
      <v-data-table
        :headers="headers"
        :items="desserts"
        class="elevation-1 box11"
        disable-pagination
        hide-default-footer
        disable-sort
        dense
        calculate-widths
      ></v-data-table>
    </v-card>
  </v-container>
</template>
<script>
import AppHeader from "../../layout/AppHeader/index.vue";
export default {
  name: "Filetakenumber",
  components: { AppHeader },
  data() {
    return {
      items: ["文件类型", "分公司", "时间"],
      Subfolder: false,
      rowSel: "",
      colSel: "",
      headers: [
        {
          text: "文件类型",
          align: "start",
          sortable: false,
          value: "name",
          divider: true,
          width: 80,
        },
        { text: "陕西省", value: "calories", divider: true, width: 80 },
        { text: "山西省", value: "fat", divider: true, width: 80 },
        { text: "广东省", value: "carbs", divider: true, width: 80 },
        { text: "广西省", value: "protein", divider: true, width: 80 },
        { text: "福建省", value: "iron", divider: true, width: 80 },
        { text: "云南省", value: "calories", divider: true, width: 80 },
      ],
      desserts: [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4,
          iron: "1%",
        },
        {
          name: "Ice cream ",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4,
          iron: "1%",
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6,
          iron: "7%",
        },
        {
          name: "Cupcake",
          calories: 305,
          fat: 3,
          carbs: 67,
          protein: 4,
          iron: "8%",
        },
        {
          name: "Gingerbread",
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3,
          iron: "16%",
        },
        {
          name: "Jelly bean",
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0,
          iron: "0%",
        },
        {
          name: "Lollipop",
          calories: 392,
          fat: 2,
          carbs: 98,
          protein: 0,
          iron: "2%",
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3,
          carbs: 87,
          protein: 6,
          iron: "45%",
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4,
          iron: "22%",
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: "6%",
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: "6%",
        }
      ],
    };
  },
  created() {
    // console.log(this.$route.params.id);
  },
  mounted() {
    this.statistics();
  },
  methods: {
    serch() {
      this.headers = [
        { text: "文件查询", value: "name", divider: true, width: 80 },
        { text: "2021", value: "filesearch", divider: true, width: 80 },
        { text: "2022 ", value: "fat", divider: true, width: 80 },
        { text: "2023 ", value: "carbs", divider: true, width: 80 },
        { text: "2024", value: "protein", divider: true, width: 80 },
        { text: "2025", value: "iron", divider: true, width: 80 },
        { text: "2025", value: "iron", divider: true, width: 80 },
      ];
      this.desserts = [
        {
          name: "张三",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4,
          iron: 6,
          filesearch:10
        },
        {
          name: "三",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4,
          iron: 4,
          filesearch:10
        },
        {
          name: "李三",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4,
          iron: 3,
          filesearch:10
        },
        {
          name: "王三",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4,
          iron: 11,
          filesearch:10
        },
      ];
      this.statistics();
    },
    statistics() {
      var calories = this.desserts.reduce(
        (acc, cur) => acc + parseFloat(cur.calories),
        0
      );
      var fat = this.desserts.reduce(
        (acc, cur) => acc + parseFloat(cur.fat),
        0
      );
      var carbs = this.desserts.reduce(
        (acc, cur) => acc + parseFloat(cur.carbs),
        0
      );
      var protein = this.desserts.reduce(
        (acc, cur) => acc + parseFloat(cur.protein),
        0
      );
      var iron = this.desserts.reduce(
        (acc, cur) => acc + parseFloat(cur.iron),
        0
      );
      var filesearch = this.desserts.reduce(
        (acc, cur) => acc + parseFloat(cur.filesearch),
        0
      );
      // 计算
      this.desserts.push({
        name: "合计",
        calories: calories,
        fat: fat,
        carbs: carbs,
        protein: protein,
        iron: iron,
        filesearch:filesearch
      });
    },
  },
  watch: {
    colSel: {
      handler(newv, old) {
        console.log(newv, old);
        if (newv!== null) {
          this.headers.shift();
          this.headers.unshift({
            text: newv,
            align: "start",
            sortable: false,
            value: "name",
            divider: true,
            width: 80,
          });
        }
      },
    },
    Subfolder:{
      handler(newv,old){
        console.log(newv,old);
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.v-icon {
  font-size: 18px !important;
}
.taber-serch {
  margin-top: 70px;
  display: flex;
  align-items: center;
  .labels {
    font-size: 12px;
    margin-right: 5px;
    color: black;
  }
}
.condition-center {
  margin-left: 15px;
  display: flex;
  height: 30px;
  border: 2px solid #eee;
  background: #eee;
  border-radius: 0px;
  button {
    min-width: 23px !important;
    background: #f5f5f5 !important;
    border-left: 2px solid #eee;
  }
}
.condition-list-item {
  display: flex;
  align-items: center;
  input {
    border: 2px solid #eee;
  }
  span {
    max-height: 30px;
    display: inline-block;
    font-size: 12px;
    padding: 7px 5px;
    border: 2px solid #eee;
    border-right: 0px;
    background: #eee;
  }
}
.ipt-width {
  width: 160px !important;
  display: flex;
  height: 30px;
  input {
    width: 100%;
    text-indent: 5px;
  }
}
.btn {
  height: 100% !important;
}
.condition-right {
  margin-left: 15px;
  display: flex;
  div{
    height: 30px;
  }
  input {
    border: 2px solid #eee;
    width: 220px;
    height:30px ;
  }
  button {
    border: 2px solid #eee;
    display: inline-block;
    height: 100%;
  }
  span.wenhao{
    line-height: 30px;
  }
}
.box11 {
  border: 2px solid #eee;
  overflow: auto;
  max-height: 450px;
}
.wenhao {
  display: inline-block !important;
  height: 100% !important;
  padding: 0 7px !important;
  background: #e8e8e8 !important;
  font-size: 19px !important;
}
.wenhao:hover {
  cursor: pointer;
  background: #dddddd !important;
}
.hint {
  border: 2px solid #eee;
  color: black;
  padding: 5px;
  border-radius: 5px;
  width: 400px;
  p {
    margin: 5px !important;
  }
}
.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
  > .v-input__control
  > .v-input__slot {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.v-input--selection-controls__ripple{
  display: none !important;
}
</style>
